import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { StyleSheet, Image } from "react-native";
import { useAppDispatch } from "app/store";
import { setCurrentRoute } from "app/modules/app";
import translate from "utils/translate";
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
export default () => {
  const dispatch = useAppDispatch();
  return (
    <Stack.Navigator
      screenListeners={{
        state: (e) => {
          const { index, routes } = e.data?.state;
          const routeName = routes[index].name;
          if (routeName !== "tabbar") {
            dispatch(setCurrentRoute(routeName));
          }
        },
      }}
      initialRouteName="tabbar"
    >
      <Stack.Screen
        name="search"
        getComponent={() => require("./src/views/home/search").default}
        options={{
          headerTitle: translate("home.bind.title"),
        }}
      />
      <Stack.Screen
        name="bleList"
        getComponent={() => require("./src/views/home/bleList").default}
        options={{
          headerTitle: translate("home.bleList.title"),
        }}
      />
      <Stack.Screen
        name="connect"
        getComponent={() => require("./src/views/home/connect").default}
        options={{
          headerTitle: translate("home.connect.title"),
        }}
      />
      <Stack.Screen
        name="add"
        getComponent={() => require("./src/views/manage/add").default}
        options={{
          headerTitle: translate("manage.add/edit"),
        }}
      />
      <Stack.Screen
        name="total"
        getComponent={() => require("./src/views/state/total").default}
        options={{
          headerTitle: translate("scale.total"),
        }}
      />
      <Stack.Screen
        name="goodsList"
        getComponent={() => require("./src/views/state/goodsList").default}
        options={{
          headerTitle: translate("scale.CommodityList"),
        }}
      />
      <Stack.Screen
        name="settings"
        getComponent={() => require("./src/views/state/settings").default}
        options={{
          headerTitle: translate("scale.settings"),
        }}
      />
      <Stack.Screen
        name="classManage"
        getComponent={() => require("./src/views/classification/home").default}
        options={{
          headerTitle: translate("class.ListManagement"),
        }}
        initialParams={{
          type: "manage",
        }}
      />
      <Stack.Screen
        name="addClass"
        getComponent={() =>
          require("./src/views/classification/addClass").default
        }
        options={{
          headerTitle: translate("class.SelectModel"),
        }}
      />
      <Stack.Screen
        name="addModel"
        getComponent={() =>
          require("./src/views/classification/addModel").default
        }
        options={{
          headerTitle: translate("class.EditList"),
        }}
      />
      <Stack.Screen
        name="goods"
        getComponent={() => require("./src/views/classification/goods").default}
        options={{
          headerTitle: translate("scale.CommodityList"),
        }}
      />
      <Stack.Screen
        name="addGoods"
        getComponent={() =>
          require("./src/views/classification/addGoods").default
        }
        options={{
          headerTitle: translate("class.EditorialGoods"),
        }}
      />
      <Stack.Screen
        name="addBaseGoods"
        getComponent={() =>
          require("./src/views/classification/addBaseGoods").default
        }
        options={{
          headerTitle: translate("class.EditorialP5Goods"),
        }}
      />
      <Stack.Screen
        name="tabbar"
        options={{
          headerShown: false,
        }}
      >
        {() => {
          return (
            <Tab.Navigator
              backBehavior="initialRoute"
              initialRouteName="index"
              screenListeners={{
                state: (e) => {
                  const { index, routes } = e.data?.state;
                  const routeName = routes[index].name;
                  dispatch(setCurrentRoute(routeName));
                },
              }}
              sceneContainerStyle={{
                flex: 1,
              }}
              screenOptions={() => {
                return {
                  headerShown: true,
                  tabBarActiveTintColor: "#0A59F7",
                };
              }}
            >
              <Tab.Screen
                name="index"
                getComponent={() => require("./src/views/home/bind").default}
                options={{
                  tabBarLabel: translate("home.tabberLabel"),
                  headerTitle: translate("home.tabberLabel"),
                  tabBarIcon: ({ focused }) => (
                    <Image
                      style={styles.icon}
                      source={
                        focused
                          ? require("./src/assets/images/sblb_2.png")
                          : require("./src/assets/images/sblb_1.png")
                      }
                    />
                  ),
                }}
              />
              <Tab.Screen
                name="manage"
                component={require("./src/views/manage/home").default}
                options={{
                  tabBarLabel: translate("manage.tabberLabel"),
                  headerTitle: translate("manage.tabberLabel"),
                  tabBarIcon: ({ focused }) => (
                    <Image
                      style={styles.icon}
                      source={
                        focused
                          ? require("./src/assets/images/sbgl_2.png")
                          : require("./src/assets/images/sbgl_1.png")
                      }
                    />
                  ),
                }}
              />
              <Tab.Screen
                name="classification"
                component={require("./src/views/classification/home").default}
                options={{
                  tabBarLabel: translate("class.tabberLabel"),
                  headerTitle: translate("class.tabberLabel"),
                  tabBarIcon: ({ focused }) => (
                    <Image
                      style={styles.icon}
                      source={
                        focused
                          ? require("./src/assets/images/fllb_2.png")
                          : require("./src/assets/images/fllb_1.png")
                      }
                    />
                  ),
                }}
              />
              <Tab.Screen
                name="order"
                component={require("./src/views/order/index").default}
                options={{
                  tabBarLabel: translate("sale.tabberLabel"),
                  headerTitle: translate("sale.tabberLabel"),
                  headerShown: true,
                  tabBarIcon: ({ focused }) => (
                    <Image
                      style={styles.icon}
                      source={
                        focused
                          ? require("./src/assets/images/spsm_2.png")
                          : require("./src/assets/images/spsm_1.png")
                      }
                    />
                  ),
                }}
              />
              <Tab.Screen
                name="specification"
                getComponent={() => require("views/state/home").default}
                options={{
                  tabBarLabel: translate("scale.tabberLabel"),
                  headerTitle: translate("scale.tabberLabel"),
                  tabBarIcon: ({ focused }) => (
                    <Image
                      style={styles.icon}
                      source={
                        focused
                          ? require("./src/assets/images/xsjl_2.png")
                          : require("./src/assets/images/xsjl_1.png")
                      }
                    />
                  ),
                }}
              />
            </Tab.Navigator>
          );
        }}
      </Stack.Screen>
    </Stack.Navigator>
  );
};

const styles = StyleSheet.create({
  icon: {
    width: 24,
    height: 24,
  },
});
